import React, { useState,useEffect } from 'react'
import './style.css'
import axios from '../../../api/api'
import { Popup, Space ,Image} from 'antd-mobile'
import Comments from '../Comments'
import {Link ,useParams} from "react-router-dom"
import { HeartOutline,HeartFill,StarOutline,StarFill } from 'antd-mobile-icons'
import { ShareO } from '@react-vant/icons';



function Video_sidebar({hearts,comments,collects,share,users,user_id,id}) {
    const [liked,setLiked]=useState(false)
    const [shoucang,setShoucang]=useState(false)
    const [visible1, setVisible1] = useState(false)
  // 视频点赞数
    const [likedNum,setLikedNum] = useState(0)
    const [shoucangNum,setShoucangNum] = useState(0)

    // const [visible2, setVisible2] = useState(false)
    // 暂停图标样式

    useEffect(() => {
      getLiked()
    },[])

    const getLiked = async() => {
      let {data:{item,liked_b,shoucang_b}} = await axios.get(`/wh_index/getLiked?user_id=${user_id}&&id=${id}`)
      setLikedNum(item.liked)
      setShoucangNum(item.shoucang)
      setLiked(liked_b)
      setShoucang(shoucang_b)
    }

    // 视频点赞
    const handelLiked = async(id) => {
      let {data:{code}} = await axios.get(`/wh_index/Pugliked?user_id=${user_id}&&id=${id}`)
      getLiked()
    }
    // 视频收藏
    const handelShouCang = async(id) => {
      let {data:{code,b}} = await axios.get(`/wh_index/PugSC?user_id=${user_id}&&id=${id}`)
      getLiked()
    }
  
  return (
    <div className='video_sidebar' key={id}>
      <Link to={`/userdetail/${id}`}>
        <div className="video_sidebar_button">
            <Image src={users} 
                    width={60} 
                    height={60}
                    fill="cover"
                    style={{ borderRadius: 60 }}  >
            </Image>
        </div>
        </Link>
        <div className="video_sidebar_button">
            {liked?(<div className="heart">
              <HeartFill className='wh_icon' fontSize={34} color='#fc3d69' onClick={() => handelLiked(id)} />
             </div> ):(
               <HeartOutline className='wh_icon' fontSize={34} onClick={() => handelLiked(id)}  />      
           )} 
               
            <p>{ likedNum }</p>
        </div>
        <div className="video_sidebar_button">
       <Comments comments={comments}/>
        </div>
        <div className="video_sidebar_button">
        {shoucang?(<div className="shoucang">
            <StarFill className='wh_icon' fontSize={34} color='#fbb900' onClick={() => handelShouCang(id)}/>
             </div> ):(
            <StarOutline className='wh_icon' fontSize={34} onClick={() => handelShouCang(id)}/>
           )}          
            <p>{shoucangNum}</p>
        </div>
        <div className="video_sidebar_button">
             <Space direction='vertical'>
             <ShareO fontSize={34} className='wh_icon' onClick={() => {
                setVisible1(true)
              }} />
            <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false)
              }}
              bodyStyle={{ minHeight: '50vh' }}
            >
            分享给朋友
            </Popup>
          </Space>           
            <p>{share}</p>
        </div>
    </div>
  )
}

export default Video_sidebar
